<style>
	#sv_unidad_de_medida { font-size:100%; width:50px; margin:0px; background:none;border:0px; color:#FFF;font-weight:bold; }
	#sv_valor  { font-size:100%; width:60px; margin:0px; text-align:right; }
	#lista_signos_vitales { margin-top:10px; }
	.sv_texto  { font-size:100%; padding-right:20px; }
	.sv_delete { cursor:pointer; }
</style>


<script>
	jQuery(function() {
		jQuery( "#fecha_sv" ).datepicker({
					showOtherMonths: true,
					dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
					dateFormat: 'dd/mm/yy',
					monthNamesShort:	['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
					monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
					changeMonth: true,
					changeYear: true,
					minDate: "-<?php echo $edad['edad'] ?><?php if($edad['unidad_edad'] == "años"){ echo "Y";}else{ echo "D";}?>", 
					maxDate: 0,					
					nextText: 'Siguiente',
					prevText: 'Anterior'
		});
	});
</script>

<?php if (!empty($SignosVitalesQuick)) {?>
	<div id="quick_list" style="display:none">
		<table width='100%'>
			<?php foreach($SignosVitalesQuick as $sv){ ?>
				<tr>
					<td>
						<input type='hidden' name='quick[<?php echo $sv['Sign']['id'];?>][name]' id='quick_<?php echo $sv['Sign']['id'];?>_name' value='<?php echo $sv['Sign']['name'];?>' >
						<?php echo $sv['Sign']['name'];?>
					</td>
					<td>
						<input name='quick[<?php echo $sv['Sign']['id'];?>][fecha]' id='quick_<?php echo $sv['Sign']['id'];?>_fecha' type="text" value="<?php echo date("d/m/Y");?>" readonly="readonly" style="width:70px;font-size: 100%;">	
<script>
	jQuery(function() {
		jQuery( "#quick_<?php echo $sv['Sign']['id'];?>_fecha" ).datepicker({
					showOtherMonths: true,
					dayNamesMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'],
					dateFormat: 'dd/mm/yy',
					monthNamesShort:	['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
					monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
					changeMonth: true,
					changeYear: true,
					minDate: "-<?php echo $edad['edad'] ?><?php if($edad['unidad_edad'] == "años"){ echo "Y";}else{ echo "D";}?>", 
					maxDate: 0,					
					nextText: 'Siguiente',
					prevText: 'Anterior'
		});
	});
</script>

					</td>
					<td style="vertical-align: middle;">
						<input type='text' name='quick[<?php echo $sv['Sign']['id'];?>][valor]' id='quick_<?php echo $sv['Sign']['id'];?>_valor' value='0.00' onclick="select();" 
							style='width:50px;font-size:12px;text-align:right;'>
						<?php echo $sv['Sign']['unidad'];?>
					</td>
				</tr>
			<?php } //endforeach ?>
			<tr>
				<td colspan='3' style='text-align:right;'>
					<input type="button" value="Agregar" id="sv_boton_agregar_quick" class="btn" style="cursor:pointer;width: 54%;">
				</td>
			</tr>
		</table>
	</div>

	<span style='float:right; text-align:right;position:absolute;right:5px;'>
		<input type="button" value="▼Lista Rápida" title='Mostrar/Ocultar la lista rápida de Signos Vitales' id="btn_quick_list" class="btn off" style="width: 100px; height:20px;padding:0px;">
	</span>
<?php } ?>
<table style="width:100%;">
	<tr>
		<td>Signos Vitales<br/>
			<select name='SignosVitalesId' id="SignosVitalesId" style="width:250px;font-size: 100%;">
				<option value="0" >Seleccione un Signo Vital</option>
			<?php foreach($SignosVitales as $sv){ ?>
				<option value="<?php echo $sv['Sign']['id'];?>" ><?php echo $sv['Sign']['name'];?></option>
			<?php } ?>
			</select>
		</td>
		<td>
			<span id="fecha_txt">Fecha:<br/></span>
			<input name="fecha_sv" id="fecha_sv" type="text" value="<?php echo date("d/m/Y");?>" readonly="readonly" style="width:90px;font-size: 100%;">	
			<input type='hidden' id='sv_id' >
			<input type='text' id='sv_valor' onclick="select();">
			<input type='text' id='sv_unidad_de_medida' readonly='true'>

			<input type="button" value="Agregar" id="sv_boton_agregar" class="btn" style="cursor:pointer;">

		</td>
	</tr>
</table>										

<table id="lista_signos_vitales">

</table>							

<script type="text/javascript">

	jQuery(function() {

		var SignosVitalesNombres  = new Array();
		var SignosVitalesUnidades = new Array();
		var SignosVitalesMin = new Array();
		var SignosVitalesMax = new Array();
		<?php foreach($SignosVitales as $sv){ ?>
			SignosVitalesNombres[<?php echo $sv['Sign']['id'];?>] = "<?php echo $sv['Sign']['name'];?>";
			SignosVitalesUnidades[<?php echo $sv['Sign']['id'];?>] = "<?php echo $sv['Sign']['unidad'];?>";
			SignosVitalesMin[<?php echo $sv['Sign']['id'];?>] = "<?php echo number_format($sv['Sign']['min'],2,'.','');?>";
			SignosVitalesMax[<?php echo $sv['Sign']['id'];?>] = "<?php echo number_format($sv['Sign']['max'],2,'.','');?>";
		<?php } ?>
	
	
	

	<?php if (!empty($SignosVitalesQuick)) {?>		

		jQuery( "#btn_quick_list" ).click(function() {
			var estado_quick_list = jQuery('#btn_quick_list').attr('class');

			if(estado_quick_list == "btn on"){
				jQuery('#btn_quick_list').removeClass('on').addClass('off');
				jQuery("#quick_list").hide();
				jQuery('#btn_quick_list').val('▼Lista Rápida');
			}else{
				jQuery('#btn_quick_list').removeClass('off').addClass('on');
				jQuery("#quick_list").show();
				jQuery('#btn_quick_list').val('▲Lista Rápida');				
			}
		});		

		//  Agregar opcion
		jQuery("#sv_boton_agregar_quick").click(function(evento){

			<?php foreach($SignosVitalesQuick as $sv){ ?>
				var valor  = jQuery("#quick_<?php echo $sv['Sign']['id'];?>_valor").val()*1;
				var fecha  = jQuery("#quick_<?php echo $sv['Sign']['id'];?>_fecha").val();
				var id_sv  = "<?php echo $sv['Sign']['id'];?>";
				var nombre = "<?php echo $sv['Sign']['name'];?>";
				var unidad = "<?php echo $sv['Sign']['unidad'];?>";
				var tds = "";

				if( (valor) > 0 ){
				
					if(SignosVitalesMin[id_sv] > valor | SignosVitalesMax[id_sv] < valor ) {
						alert(SignosVitalesNombres[id_sv] + ' Fuera de Rango: '+SignosVitalesMin[id_sv]+' - '+SignosVitalesMax[id_sv]);
					} else {
					
						tds += "<tr>";
						tds += "<td class='sv_texto'><img src='/images/delete.gif' class='sv_delete'/></td>";
						tds += "<td class='sv_texto'>";
						tds += nombre;
						tds += "</td><td class='sv_texto'><img src='/images/arrow_der.gif' hspace='2'></td>";
						tds += "<td class='sv_texto'>";
						tds += "<input name='data[SignosVitales]["+ id_sv +"][valor]' value='"+ valor +"'type='hidden'/>";
						tds += valor + ' '+ unidad;
						tds += "</td>";
						tds += "<td class='sv_texto'>";
						tds += "<input name='data[SignosVitales]["+ id_sv +"][fecha]' value='"+ fecha +"'type='hidden'/>";			
						tds += fecha+"</td>";
						tds += "</tr>";

						jQuery("#lista_signos_vitales").append(tds);
					}
				}

			<?php } // end foreach ?>

			jQuery("#quick_list").hide();

		});

	<?php } // endif $SignosVitalesQuick ?>



		jQuery('#sv_unidad_de_medida').hide();	
		jQuery('#sv_valor').hide();	
		jQuery('#sv_boton_agregar').hide();
		jQuery('#fecha_sv').hide();
		jQuery('#fecha_txt').hide();
		jQuery('#sv_id').val(0);
		
		jQuery('#SignosVitalesId').change(function(event){
			var sv_id = jQuery(this).val()
			jQuery('#sv_id').val(sv_id);
			jQuery('#sv_unidad_de_medida').hide();
			jQuery('#sv_valor').hide();
			jQuery('#sv_boton_agregar').hide();
			jQuery('#fecha_sv').hide();
			jQuery('#fecha_txt').hide();
			
			if (sv_id>0) {
				jQuery('#sv_unidad_de_medida').val(SignosVitalesUnidades[sv_id]);
				jQuery('#sv_unidad_de_medida').show();
				jQuery('#sv_valor').val('0.00');
				jQuery('#sv_valor').show();
				jQuery('#fecha_sv').show();
				jQuery('#fecha_txt').show();
				jQuery('#sv_boton_agregar').show();
			}
		
			
		}); 

		//  Agregar opcion
		jQuery("#sv_boton_agregar").click(function(evento){
			var sv_id = jQuery("#sv_id").val();
			var sv_valor = jQuery("#sv_valor").val()*1;
			var fecha_sv = jQuery("#fecha_sv").val();
			var tds = "";


			if(SignosVitalesNombres[sv_id] != undefined){
			
				if(SignosVitalesMin[sv_id] > sv_valor | SignosVitalesMax[sv_id] < sv_valor ) {
					alert('Fuera de Rango: '+SignosVitalesMin[sv_id]+' - '+SignosVitalesMax[sv_id]);
				} else {
			
					tds += "<tr>";
					tds += "<td class='sv_texto'><img src='/images/delete.gif' class='sv_delete'/></td>";
					tds += "<td class='sv_texto'>";
					tds += SignosVitalesNombres[sv_id];
					tds += "</td><td class='sv_texto'><img src='/images/arrow_der.gif' hspace='2'></td>";
					tds += "<td class='sv_texto'>";
					tds += "<input name='data[SignosVitales]["+ sv_id +"][valor]' value='"+ sv_valor +"'type='hidden'/>";
					tds += sv_valor + " " + SignosVitalesUnidades[sv_id];
					tds += "</td>";
					tds += "<td class='sv_texto'>";
					tds += "<input name='data[SignosVitales]["+ sv_id +"][fecha]' value='"+ fecha_sv +"'type='hidden'/>";			
					tds += fecha_sv+"</td>";
					tds += "</tr>";

					jQuery("#lista_signos_vitales").append(tds);
					jQuery('#sv_id').val(0);
					jQuery("#SignosVitalesId option[value='0']").attr("selected","selected"); //select the second option
					jQuery('#sv_unidad_de_medida').hide();
					jQuery('#sv_valor').hide();
					jQuery('#fecha_sv').hide();
					jQuery('#sv_boton_agregar').hide();
					jQuery('#fecha_txt').hide();
				}
			}
		});
		   
		// event listener for delete button 
		jQuery(".sv_delete").live('click', function(event) {
			jQuery(this).parent().parent().remove();
		});    
	})
</script>